<template>
  <div>
    <Card>
      <p slot="title" class="card-title">
        <Icon type="home"></Icon>
        <span>节点管理</span>
      </p>
      <div>
        <Row>
          <Col span="15" class="margin-bottom-10">
            <Button type="info" @click="openAddModal(null)">
              <Icon type="md-add"></Icon>&nbsp;添加节点
            </Button>
            <Button type="success" @click="getData">
              <Icon type="md-refresh"></Icon>&nbsp;刷新数据
            </Button>
          </Col>
        </Row>
        <div class="tables">
          <Table border :columns="columns" :data="datas">
            <template slot-scope="{ row }" slot="type">
              <strong>{{ row.type===0?'线上':'备用' }}</strong>
            </template>
            <template slot-scope="{ row, index }" slot="action">
              <Button type="primary" @click="openAddModal(row)" size="small">编辑</Button>
              <Button type="error" @click="remove(row.id)" size="small">删除</Button>
            </template>
          </Table>
        </div>
        <Page :total="dataCount" :page-size="pageSize" show-total show-sizer class="paging" @on-change="changepage"
              @on-page-size-change="changepagesize"></Page>
      </div>
    </Card>
    <Modal v-model="modal.show" :title="modal.type==1 ? '添加节点':'更新节点'"
           @on-ok="modalOk"
           :mask-closable="false">
      <Alert show-icon>名称就是备注</Alert>
      <Form :model="modal.data" :label-width="80">
        <FormItem v-if="modal.type==2" label="ID">
          <Input disabled :value="modal.data.id"></Input>
        </FormItem>

        <FormItem label="名称/描述">
          <Input v-model.trim="modal.data.desc"></Input>
        </FormItem>
        <FormItem label="类型">
          <Select v-model.trim="modal.data.type" style="width:100%">
            <Option v-for="item in [{label:'线上',value:0},{label:'备用',value:1}]"
                    :value="item.value" :key="item.value">{{ item.label }}
            </Option>
          </Select>
        </FormItem>
        <FormItem label="节点IP">
          <Input v-model.trim="modal.data.ip"></Input>
        </FormItem>
        <FormItem label="节点端口">
          <Input v-model.trim="modal.data.port"></Input>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>
<script>
  import {addNode, listNode, updateNode, removeNode} from '@/api/serverNode'

  export default {
    data() {
      return {
        dataCount: 0,
        // 每页显示多少条
        pageSize: 10,
        page: 1,
        columns: [
          {
            title: '节点ID',
            key: 'id',
          },
          {
            title: '节点类型',
            key: 'type',
            slot: 'type',
          },
          {
            title: '节点ip',
            key: 'ip',
          },
          {
            title: '节点端口',
            key: 'port',
          },
          {
            title: '节点(名字/描述)',
            key: 'desc',
          },
          {
            title: '操作',
            slot: 'action',
            width: 150,
            align: 'center'
          }
        ],
        datas: [],
        modal: {
          show: false,
          type: 1,
          data: {
            id: 0,
            desc: '',
            type: 0, // 0-上线 1-备用
            port: '',
            ip: '',
          }
        },
        removeObject: null
      }
    },
    created() {
      this.getData()
    },
    methods: {
      getData() {
        let _this = this;
        listNode("?page=" + this.page + "&pageSize=" + this.pageSize).then((data) => {
          if (data.data.code === 200) {
            _this.datas = data.data.data.list;
            _this.dataCount = data.data.data.totalRow;
          } else {
            this.$Message.error(data.data.msg)
          }
        });
      },
      openAddModal(row) {
        if (row === null) {
          this.modal.type = 1;
          this.modal.data = {
            id: 0,
            desc: '',
            type: 0, // 0-上线 1-备用
            port: '',
            ip: '',
          }
        } else {
          this.modal.type = 2;
          console.log(row)
          this.modal.data = row;
        }
        console.log(this.modal.data)
        this.modal.show = true
      },
      modalOk() {
        if (this.modal.type === 1) {
          this.add()
        } else {
          this.update();
        }
      },
      add() {
        this.$Message.loading({
          content: '资源添加中...',
          duration: 0
        });
        try {
          console.log(this.modal.data)
          addNode(this.modal.data).then((data) => {
            if (data.data.code === 200) {
              this.$Message.success(data.data.msg)
            } else {
              this.$Message.error(data.data.msg)
            }
            this.$Message.destroy()
            this.getData()
          });

        } catch (error) {
          console.log(error)
        }
      },
      update() {
        this.$Message.loading({
          content: '资源更新中...',
          duration: 0
        });
        try {
          console.log(this.modal.data)
          updateNode(this.modal.data).then((data) => {
            if (data.data.code === 200) {
              this.$Message.success(data.data.msg)
            } else {
              this.$Message.error(data.data.msg)
            }
            this.getData()
            this.$Message.destroy()
          });
        } catch (error) {
          console.log(error)
        }
      },
      remove(id) {
        console.log(id)
        try {
          removeNode("?id=" + id).then((data) => {
            if (data.data.code === 200) {
              this.$Message.success(data.data.msg)
            } else {
              this.$Message.error(data.data.msg)
            }
            this.getData()
            this.$Message.destroy()
          });
        } catch (error) {
          console.log(error)
        }
      },
      changepage(page) {
        this.page = page;
        this.getData();
      },
      changepagesize(pageSize) {
        this.pageSize = pageSize;
      }
    }
  }
</script>
<style>
  .tables {
    margin: 10px 0;
  }
</style>
